<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的课程 - 中山大学刷题平台</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-blue': '#045525',        // 校色主蓝
                        'sysu-lightBlue': '#e6f7ff',   // 浅蓝辅助色
                        'sysu-darkBlue': '#03441D',    // 深蓝
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-green': '#045525',       // 校色主绿
                        'sysu-yellow': '#faad14',      // 校色主黄
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-sysu {
                @apply bg-sysu-blue text-white px-4 py-2 rounded-lg hover:bg-sysu-darkBlue transition-colors;
            }
            .btn-outline {
                @apply border border-gray-300 bg-white text-gray-700 px-4 py-2 rounded-lg hover:border-sysu-blue hover:text-sysu-blue transition-colors;
            }
            .card-hover {
                @apply hover:shadow-card-hover transition-shadow duration-300 transform hover:-translate-y-1;
            }
            .section-title {
                @apply text-2xl font-bold text-gray-800 mb-6 relative after:absolute after:bottom-0 after:left-0 after:h-1 after:w-12 after:bg-sysu-blue;
            }
            .course-tag {
                @apply inline-block px-2 py-1 text-xs rounded-full mr-2 mb-2;
            }
            .progress-bar {
                @apply h-2 bg-gray-200 rounded-full overflow-hidden;
            }
            .progress-value {
                @apply h-full bg-sysu-blue rounded-full transition-all duration-500;
            }
        }
    </style>
</head>
<body class="bg-gray-50 opacity-0" id="body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm transform translate-y-[-20px] opacity-0" id="header">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-blue text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-blue">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">排行榜</a>
                    <a href="/resources" class="text-sysu-blue font-medium border-b-2 border-sysu-blue py-5">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block">
                        <input type="text" placeholder="搜索课程"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm w-40 lg:w-56">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                    </div>

                    <!-- 用户区域容器 -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden p-2 text-gray-600 hover:text-sysu-blue" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端导航（默认隐藏） -->
        <div class="md:hidden hidden pb-4" id="mobile-menu">
            <div class="flex items-center relative mb-4 mx-2">
                <input type="text" placeholder="搜索课程"
                       class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm">
                <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
            </div>
            <nav class="flex flex-col space-y-2 mx-2">
                <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">首页</a>
                <a href="/questions" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">题库</a>
                <a href="/contests" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">竞赛</a>
                <a href="/ranking" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">排行榜</a>
                <a href="/resources" class="text-sysu-blue px-2 py-2 bg-sysu-lightBlue rounded font-medium">学习资源</a>
            </nav>
        </div>
    </header>

    <main class="container mx-auto px-4 py-8">
        <!-- 面包屑导航 -->
        <div class="text-sm text-gray-500 mb-6 opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">
            <a href="/" class="hover:text-sysu-blue">首页</a>
            <span class="mx-2"><i class="fa fa-angle-right"></i></span>
            <a href="/resources" class="hover:text-sysu-blue">学习资源</a>
            <span class="mx-2"><i class="fa fa-angle-right"></i></span>
            <span class="text-gray-700">我的课程</span>
        </div>

        <!-- 页面标题与控制区 -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4 opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">我的课程</h2>
                <p class="text-gray-500 mt-1">已报名和正在学习的课程列表</p>
            </div>

            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:border-sysu-blue text-sm">
                        <option>全部状态</option>
                        <option>学习中</option>
                        <option>已完成</option>
                        <option>未开始</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 text-xs pointer-events-none"></i>
                </div>
                <button class="btn-outline flex items-center">
                    <i class="fa fa-filter mr-2"></i> 筛选
                </button>
            </div>
        </div>

        <!-- 课程统计卡片 -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-10">
            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">总课程数</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">12</h3>
                    </div>
                    <div class="w-10 h-10 bg-sysu-blue/10 text-sysu-blue rounded-full flex items-center justify-center">
                        <i class="fa fa-graduation-cap"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">学习中</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">5</h3>
                    </div>
                    <div class="w-10 h-10 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-play-circle-o"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">已完成</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">7</h3>
                    </div>
                    <div class="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程列表 -->
        <section class="mb-16">
            <h3 class="section-title opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">学习中课程</h3>

            <div class="space-y-6">
                <!-- 课程卡片1 -->
                <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="md:col-span-1">
                            <div class="h-full relative">
                                <img src="https://picsum.photos/id/0/400/300" alt="Python编程基础" class="w-full h-full object-cover">
                                <span class="absolute top-3 left-3 course-tag bg-blue-500 text-white">进行中</span>
                            </div>
                        </div>
                        <div class="md:col-span-3 p-6">
                            <div class="flex flex-wrap gap-2 mb-3">
                                <span class="course-tag bg-blue-100 text-blue-700">Python</span>
                                <span class="course-tag bg-gray-200 text-gray-700">编程基础</span>
                                <span class="course-tag bg-gray-200 text-gray-700">入门</span>
                            </div>

                            <h3 class="text-xl font-bold text-gray-800 mb-2">Python编程基础与实践</h3>

                            <p class="text-gray-600 mb-4 line-clamp-2">
                                本课程从Python基础语法开始，逐步讲解数据结构、函数编程、文件操作等核心知识点，通过大量实例帮助初学者快速掌握Python编程技能。
                            </p>

                            <div class="mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">学习进度</span>
                                    <span class="text-gray-600">65%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-value" style="width: 65%"></div>
                                </div>
                            </div>

                            <div class="flex flex-wrap justify-between items-center">
                                <div class="flex items-center text-gray-500 text-sm mb-2 sm:mb-0">
                                    <span class="flex items-center mr-4">
                                        <i class="fa fa-user mr-1"></i> 李教授
                                    </span>
                                    <span class="flex items-center mr-4">
                                        <i class="fa fa-clock-o mr-1"></i> 12小时
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fa fa-signal mr-1"></i> 入门
                                    </span>
                                </div>

                                <button class="btn-sysu flex items-center">
                                    <i class="fa fa-play mr-2"></i> 继续学习
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 课程卡片2 -->
                <div class="bg-white rounded-xl shadow-card overflow-hidden card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="md:col-span-1">
                            <div class="h-full relative">
                                <img src="https://picsum.photos/id/180/400/300" alt="数据结构与算法" class="w-full h-full object-cover">
                                <span class="absolute top-3 left-3 course-tag bg-blue-500 text-white">进行中</span>
                            </div>
                        </div>
                        <div class="md:col-span-3 p-6">
                            <div class="flex flex-wrap gap-2 mb-3">
                                <span class="course-tag bg-purple-100 text-purple-700">算法</span>
                                <span class="course-tag bg-gray-200 text-gray-700">数据结构</span>
                                <span class="course-tag bg-gray-200 text-gray-700">进阶</span>
                            </div>

                            <h3 class="text-xl font-bold text-gray-800 mb-2">数据结构与算法分析</h3>

                            <p class="text-gray-600 mb-4 line-clamp-2">
                                系统讲解常用数据结构（链表、栈、队列、树、图等）和经典算法（排序、查找、递归、动态规划等），培养算法思维和问题解决能力。
                            </p>

                            <div class="mb-4">
                                <div class="flex justify-between text-sm mb-1">
                                    <span class="text-gray-600">学习进度</span>
                                    <span class="text-gray-600">32%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-value" style="width: 32%"></div>
                                </div>
                            </div>

                            <div class="flex flex-wrap justify-between items-center">
                                <div class="flex items-center text-gray-500 text-sm mb-2 sm:mb-0">
                                    <span class="flex items-center mr-4">
                                        <i class="fa fa-user mr-1"></i> 王教授
                                    </span>
                                    <span class="flex items-center mr-4">
                                        <i class="fa fa-clock-o mr-1"></i> 24小时
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fa fa-signal mr-1"></i> 进阶
                                    </span>
                                </div>

                                <button class="btn-sysu flex items-center">
                                    <i class="fa fa-play mr-2"></i> 继续学习
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 已完成课程 -->
        <section class="mb-16">
            <h3 class="section-title opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">已完成课程</h3>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 课程卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/160/400/300" alt="C语言基础" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 course-tag bg-green-500 text-white">已完成</span>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-gray-800 mb-2">C语言程序设计基础</h3>
                        <div class="flex flex-wrap gap-2 mb-3">
                            <span class="course-tag bg-gray-200 text-gray-700">C语言</span>
                            <span class="course-tag bg-gray-200 text-gray-700">入门</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                            掌握C语言基本语法、指针、内存管理等核心概念，为编程学习打下坚实基础。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-500">完成于：2023-05-12</span>
                            <a href="#" class="text-sysu-blue text-sm hover:underline">复习</a>
                        </div>
                    </div>
                </div>

                <!-- 课程卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="relative h-48">
                        <img src="https://picsum.photos/id/119/400/300" alt="HTML与CSS" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 course-tag bg-green-500 text-white">已完成</span>
                    </div>
                    <div class="p-5">
                        <h3 class="font-bold text-gray-800 mb-2">HTML与CSS网页设计</h3>
                        <div class="flex flex-wrap gap-2 mb-3">
                            <span class="course-tag bg-gray-200 text-gray-700">前端</span>
                            <span class="course-tag bg-gray-200 text-gray-700">HTML/CSS</span>
                        </div>
                        <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                            学习网页制作的基础知识和样式设计，掌握响应式布局和现代UI设计原则。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs text-gray-500">完成于：2023-04-05</span>
                            <a href="#" class="text-sysu-blue text-sm hover:underline">复习</a>
                        </div>
                    </div>
                </div>

                <!-- 更多课程卡片... -->
            </div>
        </section>
    </main>

    <footer class="bg-white border-t border-gray-200 mt-16 py-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <div class="w-8 h-8 bg-sysu-blue text-white rounded-lg flex items-center justify-center mr-2">
                        <i class="fa fa-graduation-cap"></i>
                    </div>
                    <span class="text-gray-600">中山大学刷题平台 © 2023</span>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-sysu-blue transition-colors">
                        <i class="fa fa-github text-lg"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-sysu-blue transition-colors">
                        <i class="fa fa-weixin text-lg"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-sysu-blue transition-colors">
                        <i class="fa fa-envelope text-lg"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            // 显示页面主体
            setTimeout(() => {
                document.getElementById('body').classList.add('transition-opacity', 'duration-500', 'opacity-100');
            }, 100);

            // 显示导航栏
            setTimeout(() => {
                document.getElementById('header').classList.add('transition-all', 'duration-500', 'translate-y-0', 'opacity-100');
            }, 200);

            // 元素动画
            const animatedElements = document.querySelectorAll('[data-animation="true"]');
            animatedElements.forEach(el => {
                const delay = el.getAttribute('data-delay') || 0;
                setTimeout(() => {
                    el.classList.add('transition-all', 'duration-500', 'opacity-100', 'translate-y-0');
                }, parseInt(delay) + 300);
            });

            // 移动端菜单切换
            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
            const mobileMenu = document.getElementById('mobile-menu');

            mobileMenuBtn.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
        });
    </script>
</body>
</html>